WebXR Hit Test Resultaat: Verwerking van Ray Casting Resultaten voor Meeslepende Ervaringen

De WebXR Device API opent spannende mogelijkheden voor het creëren van meeslepende augmented reality (AR) en virtual reality (VR) ervaringen direct in de browser. Een van de fundamentele aspecten van het bouwen van interactieve WebXR-applicaties is het begrijpen en effectief gebruiken van hit test resultaten. Dit blogbericht biedt een uitgebreide gids voor het verwerken van hit test resultaten verkregen via ray casting, waardoor u intuïtieve en boeiende gebruikersinteracties kunt creëren binnen uw WebXR-scènes.

Wat is Ray Casting en waarom is het belangrijk in WebXR?

Ray casting is een techniek die wordt gebruikt om te bepalen of een straal, afkomstig van een specifiek punt en richting, objecten in een 3D-scène snijdt. In WebXR wordt ray casting doorgaans gebruikt om de blik van de gebruiker of het traject van een virtueel object te simuleren. Wanneer de straal een oppervlak uit de echte wereld (in AR) of een virtueel object (in VR) snijdt, wordt een hit test resultaat gegenereerd.

Hit test resultaten zijn om verschillende redenen cruciaal:

• Plaatsing van Virtuele Objecten: In AR stellen hit tests u in staat om virtuele objecten nauwkeurig te plaatsen op oppervlakken uit de echte wereld, zoals tafels, vloeren of muren.
• Gebruikersinteractie: Door bij te houden waar de gebruiker kijkt of wijst, maken hit tests interacties met virtuele objecten mogelijk, zoals het selecteren, manipuleren of activeren ervan.
• Navigatie: In VR-omgevingen kunnen hit tests worden gebruikt om navigatiesystemen te implementeren, waardoor gebruikers kunnen teleporteren of zich door de scène kunnen bewegen door naar specifieke locaties te wijzen.
• Botsingsdetectie: Hit tests kunnen worden gebruikt voor eenvoudige botsingsdetectie, om te bepalen wanneer een virtueel object botst met een ander object of de echte wereld.

De WebXR Hit Test API begrijpen

De WebXR Hit Test API biedt de nodige tools voor het uitvoeren van ray casting en het verkrijgen van hit test resultaten. Hier is een overzicht van de belangrijkste concepten en functies:

XRRay

Een XRRay vertegenwoordigt een straal in de 3D-ruimte. Het wordt gedefinieerd door een oorsprongspunt en een richtingsvector. U kunt een XRRay creëren met behulp van de XRFrame.getPose() methode, die de pose retourneert van een getrackte invoerbron (bijv. het hoofd van de gebruiker, een handcontroller). Vanuit de pose kunt u de oorsprong en richting van de straal afleiden.

XRHitTestSource

Een XRHitTestSource vertegenwoordigt een bron van hit test resultaten. U creëert een hit test bron met behulp van de XRSession.requestHitTestSource() of XRSession.requestHitTestSourceForTransientInput() methode. De eerste methode wordt over het algemeen gebruikt voor continue hit testing op basis van een persistente bron, zoals de hoofdpositie van de gebruiker, terwijl de tweede bedoeld is voor tijdelijke invoergebeurtenissen, zoals knopdrukken of gebaren.

XRHitTestResult

Een XRHitTestResult vertegenwoordigt een enkel snijpunt tussen de straal en een oppervlak. Het bevat informatie over de doorsnede, zoals de afstand van de straaloorsprong tot het raakpunt en de pose van het raakpunt in de referentieruimte van de scène.

XRHitTestResult.getPose()

Deze methode retourneert de XRPose van het raakpunt. De pose bevat de positie en oriëntatie van het raakpunt, die kunnen worden gebruikt om virtuele objecten te plaatsen of andere transformaties uit te voeren.

Hit Test Resultaten verwerken: Een stap-voor-stap gids

Laten we het proces doorlopen van het verkrijgen en verwerken van hit test resultaten in een WebXR-applicatie. Dit voorbeeld gaat ervan uit dat u een renderingbibliotheek zoals three.js of Babylon.js gebruikt.

1. Een Hit Test Bron aanvragen

Eerst moet u een hit test bron aanvragen bij de XRSession. Dit gebeurt doorgaans nadat de sessie is gestart. U moet het coördinatensysteem specificeren waarin u de hit test resultaten wilt ontvangen. Bijvoorbeeld:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Uitleg:

• xrSession.requestHitTestSource(): Deze functie vraagt een hit test bron aan bij de XR-sessie.
• { space: xrSession.viewerSpace }: Dit specificeert het coördinatensysteem waarin de hit test resultaten zullen worden geretourneerd. viewerSpace is relatief ten opzichte van de positie van de kijker, terwijl local relatief is ten opzichte van de XR-oorsprong. U kunt ook localFloor gebruiken voor tracking relatief ten opzichte van de vloer.
• Foutafhandeling: Het try...catch-blok zorgt ervoor dat fouten tijdens het aanmaken van de hit test bron worden opgevangen en gelogd.

2. De Hit Test uitvoeren in de Animatie Loop

Binnen uw animatie loop (de functie die elk frame rendert), moet u de hit test uitvoeren met behulp van de XRFrame.getHitTestResults() methode. Deze methode retourneert een array van XRHitTestResult objecten, die alle gevonden snijpunten in de scène vertegenwoordigen.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Uitleg:

• frame.getViewerPose(xrSession.referenceSpace): Krijgt de pose van de kijker (headset). Dit is nodig om te weten waar de kijker is en waar deze kijkt.
• frame.getHitTestResults(xrHitTestSource): Voert de hit test uit met behulp van de eerder gecreëerde hit test bron.
• hitTestResults.length > 0: Controleert of er snijpunten zijn gevonden.

3. De Hit Test Resultaten verwerken

De processHitTestResults() functie is waar u de resultaten van de hit test afhandelt. Dit omvat doorgaans het bijwerken van de positie en oriëntatie van een virtueel object op basis van de pose van het raakpunt.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Uitleg:

• hitTestResults[0]: Haalt het eerste hit test resultaat op. Als meerdere snijpunten mogelijk zijn, moet u mogelijk door de hele array itereren en het meest geschikte resultaat kiezen op basis van de logica van uw applicatie.
• hit.getPose(xrSession.referenceSpace): Krijgt de pose van het raakpunt in de gespecificeerde referentieruimte.
• virtualObject.position.set(...) en virtualObject.quaternion.set(...): Werken de positie en rotatie (quaternion) van een virtueel object (bijv. een three.js Mesh) bij om overeen te komen met de pose van het raakpunt.
• Visuele Feedback: Het voorbeeld bevat ook code om visuele feedback te tonen op het raakpunt, zoals een cirkel of een eenvoudige markering, om de gebruiker te helpen begrijpen waar ze interacteren met de scène.

Geavanceerde Hit Testing Technieken

Naast het basisvoorbeeld hierboven zijn er verschillende geavanceerde technieken die u kunt gebruiken om uw hit testing implementaties te verbeteren:

Hit Testing met Tijdelijke Invoer

Voor interacties die worden geactiveerd door tijdelijke invoer, zoals knopdrukken of handgebaren, kunt u de XRSession.requestHitTestSourceForTransientInput() methode gebruiken. Deze methode creëert een hit test bron die specifiek is voor een enkele invoergebeurtenis. Dit is handig om onbedoelde interacties op basis van continue hit testing te voorkomen.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Hit Test Resultaten filteren

In sommige gevallen wilt u mogelijk hit test resultaten filteren op basis van specifieke criteria, zoals de afstand tot de straaloorsprong of het type oppervlak dat werd gesneden. Dit kunt u bereiken door de XRHitTestResult array handmatig te filteren nadat u deze hebt verkregen.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Verschillende Referentieruimtes gebruiken

De keuze van de referentieruimte (viewerSpace, local, localFloor, of andere aangepaste ruimtes) heeft een aanzienlijke invloed op hoe hit test resultaten worden geïnterpreteerd. Overweeg het volgende:

• viewerSpace: Levert resultaten relatief ten opzichte van de positie van de kijker. Dit is handig voor het creëren van interacties die direct zijn gekoppeld aan de blik van de gebruiker.
• local: Levert resultaten relatief ten opzichte van de XR-oorsprong (het startpunt van de XR-sessie). Dit is geschikt voor het creëren van ervaringen waarbij objecten vast blijven staan in de fysieke omgeving.
• localFloor: Vergelijkbaar met local, maar de Y-as is uitgelijnd met de vloer. Dit vereenvoudigt het proces van het plaatsen van objecten op de vloer.

Kies de referentieruimte die het beste aansluit bij de vereisten van uw applicatie. Experimenteer met verschillende referentieruimtes om hun gedrag en beperkingen te begrijpen.

Optimalisatiestrategieën voor Hit Testing

Hit testing kan een computationeel intensief proces zijn, vooral in complexe scènes. Hier zijn enkele optimalisatiestrategieën om te overwegen:

• Beperk de Frequentie van Hit Tests: Voer hit tests alleen uit wanneer nodig, in plaats van elk frame. U kunt bijvoorbeeld hit tests alleen uitvoeren wanneer de gebruiker actief interactie heeft met de scène.
• Gebruik een Bounding Volume Hierarchy (BVH): Als u hit tests uitvoert tegen een groot aantal objecten, overweeg dan het gebruik van een BVH om de snijpuntberekeningen te versnellen. Bibliotheken zoals three.js en Babylon.js bieden ingebouwde BVH-implementaties.
• Ruimtelijke Partitionering: Verdeel de scène in kleinere regio's en voer hit tests alleen uit tegen de regio's die waarschijnlijk snijpunten bevatten. Dit kan het aantal objecten dat moet worden gecontroleerd aanzienlijk verminderen.
• Verminder Polygoonaantal: Vereenvoudig de geometrie van uw modellen om het aantal polygonen dat moet worden getest te verminderen. Dit kan de prestaties verbeteren, vooral op mobiele apparaten.
• WebWorker: verplaats de berekening naar een web worker om ervoor te zorgen dat het hit test proces de hoofdthread niet blokkeert.

Cross-Platform Overwegingen

WebXR streeft ernaar cross-platform te zijn, maar er kunnen subtiele verschillen zijn in gedrag tussen verschillende apparaten en browsers. Houd het volgende in gedachten:

• Apparaatfunctionaliteit: Niet alle apparaten ondersteunen alle WebXR-functies. Gebruik functiedetectie om te bepalen welke functies beschikbaar zijn en pas uw applicatie dienovereenkomstig aan.
• Invoerprofielen: Verschillende apparaten kunnen verschillende invoerprofielen gebruiken (bijv. generiek touchscreen, hand-tracking, gamepad). Zorg ervoor dat uw applicatie meerdere invoerprofielen ondersteunt en geschikte fallback-mechanismen biedt.
• Prestaties: De prestaties kunnen aanzienlijk variëren tussen verschillende apparaten. Optimaliseer uw applicatie voor de laagst gepositioneerde apparaten die u van plan bent te ondersteunen.
• Browsercompatibiliteit: Zorg ervoor dat uw app is getest en werkt in de belangrijkste browsers zoals Chrome, Firefox en Edge.

Wereldwijde voorbeelden van WebXR-applicaties die Hit Testing gebruiken

Hier zijn enkele voorbeelden van WebXR-applicaties die effectief gebruikmaken van hit testing om boeiende en intuïtieve gebruikerservaringen te creëren:

• IKEA Place (Zweden): Stelt gebruikers in staat om virtueel IKEA-meubels in hun huis te plaatsen met behulp van AR. Hit testing wordt gebruikt om het meubilair nauwkeurig op de vloer en andere oppervlakken te positioneren.
• Sketchfab AR (Frankrijk): Maakt het mogelijk om 3D-modellen van Sketchfab in AR te bekijken. Hit testing wordt gebruikt om de modellen in de echte wereld te plaatsen.
• Augmented Images (Diverse): Veel AR-applicaties gebruiken beeldtracking gecombineerd met hit testing om virtuele inhoud te verankeren aan specifieke afbeeldingen of markers in de echte wereld.
• WebXR Games (Wereldwijd): Talloze games worden ontwikkeld met WebXR, waarvan vele afhankelijk zijn van hit testing voor objectplaatsing, interactie en navigatie.
• Virtuele Tours (Wereldwijd): Meeslepende tours van locaties, musea of eigendommen maken vaak gebruik van hit testing voor gebruikersnavigatie en interactieve elementen binnen de virtuele omgeving.

Conclusie

Het beheersen van WebXR hit test resultaten en ray casting verwerking is essentieel voor het creëren van boeiende en intuïtieve AR- en VR-ervaringen op het web. Door de onderliggende concepten te begrijpen en de technieken toe te passen die in dit blogbericht worden beschreven, kunt u meeslepende applicaties bouwen die de virtuele en echte werelden naadloos met elkaar verbinden, of boeiende virtuele omgevingen creëren met natuurlijke en intuïtieve gebruikersinteracties. Vergeet niet uw hit testing implementatie te optimaliseren voor prestaties en overweeg cross-platform compatibiliteit om een soepele ervaring voor alle gebruikers te garanderen. Naarmate het WebXR-ecosysteem zich blijft ontwikkelen, kunt u verdere verbeteringen en verfijningen van de hit testing API verwachten, wat nog meer creatieve mogelijkheden opent voor meeslepende webontwikkeling. Raadpleeg altijd de nieuwste WebXR-specificaties en browserdocumentatie voor de meest actuele informatie.